<template>
  <a-modal :title="`管理集卡任务`" style="top: 100px;" :visible="true" width="1000px" @cancel="handleCancel">
    <div class="tips">
    </div>
    <a-table class="product-table" :rowKey="row => row.id" :dataSource="list" bordered :pagination="false" size="small">
      <a-table-column title="任务ID" width="20px">
        <template slot-scope="row">
          <div>{{ row.id }}</div>
        </template>
      </a-table-column>
      <a-table-column title="任务标题" key="title" width="60px">
        <template slot-scope="row">
          <span>
            {{row.title || '-'}}
          </span>
        </template>
      </a-table-column>
      <a-table-column title="所需碎片" key="number" width="100px">
        <template slot-scope="row">
          <div>
            {{row.chip_ids.length}}种
          </div>
        </template>
      </a-table-column>

      <a-table-column title="每人限兑次数" width="50px">
        <template slot-scope="row">
          <span v-if="row.swap_limit">
            {{row.swap_limit}}次
            <!-- <a-input v-model="row.stock" placeholder="请输入" style="width:80px;" /> -->
          </span>
          <span v-else>
            -
          </span>
        </template>
      </a-table-column>

      <a-table-column title="已兑次数" width="50px">
        <template slot-scope="row">
          <span>
            {{row.sales}}次
            <!-- <a-input v-model="row.stock" placeholder="请输入" style="width:80px;" /> -->
          </span>
        </template>
      </a-table-column>

      <a-table-column title="排序" width="50px">
        <template slot-scope="row">
          <span>
            {{row.list_weight}}
            <!-- <a-input v-model="row.stock" placeholder="请输入" style="width:80px;" /> -->
          </span>
        </template>
      </a-table-column>
      <!-- <a-table-column title="已领取/已抽出" width="60px">
        <template slot-scope="row">
          <span>
            {{row.sales}}次 / {{row.allot_total}}次
          </span>
        </template>
      </a-table-column> -->
      <!-- <a-table-column title="上下架" width="80px">
        <template slot-scope="row">
          <span>
            <i-switch :active="row.status || 1" v-model="row.status" size="small"></i-switch>
          </span>
        </template>
      </a-table-column> -->
      <a-table-column title="操作" width="80px">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical" />
          <a href="javascript:;" @click="handleDelete(row)">删除</a>
        </template>
      </a-table-column>
    </a-table>
    <template slot="footer">
      <div class="btn-c">
        <a-button type="primary" class="add" @click="handleCreate">
          新增一个任务
        </a-button>
        <div style="flex-grow: 1;"></div>

        <a-button key="back" @click="handleCancel">关闭</a-button>
        <!-- <a-button key="submit" type="primary" @click="handleSave">
          保存
        </a-button> -->
      </div>
    </template>

  </a-modal>
</template>
<script>
  import UploadImages from '@/components/UploadImages/UploadImages'
  import iSwitch from '@/components/ISwitch/ISwitch'

  export default {
    components: {
      UploadImages,
      iSwitch
    },
    props: {
      info: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    data() {
      return {
        current:  {},
        isEditNeedCard: false,
        list: [],
        cardList: [],
        frame: [
          {
            type: 'input',
            key: 'title',
            title: '任务标题',
            tips: '显示在小程序任务卡片上，不填则不显示'
            // required: true
          },
          {
            type: 'chip_ids',
            key: 'chip_ids',
            title: '需要收集的碎片',
            tips: '添加顺序即为显示的顺序',
            // default: row.list_weight,
            required: true
          },
          {
            type: 'number',
            key: 'swap_limit',
            title: '每人限兑次数',
            tips: '填0则不限制，填1则表示每人限制兑换1次',
            // default: row.list_weight,
            // required: true
          },
          {
            type: 'blank',
          },
          {
            type: 'text',
            title: '可兑换的礼品',
            text: '创建成功后返回活动列表中添加',
            // default: row.list_weight,
            // required: true
          },
          {
            type: 'number',
            title: '排序',
            key: 'list_weight',
            tips: '数字越大越靠前'
            // default: row.list_weight,
            // required: true
          },
          {
            type: 'link',
            title: '链接',
            key: 'link',
            tips: '“去集卡”跳转链接',
            span: 24,
            default: {}
            // default: row.list_weight,
            // required: true
          },
        ],
      }
    },
    watch: {
      uuid() {
        this.initList()
      },
    },
    created() {
      this.initList()
    },
    methods: {
      displayNeedCard(row) {
        let needCards = row.need_cards || {}

        let str = ''
        for (let key in needCards) {

          let card = this.cardList.find(item => {
            return key == item.id
          })

          console.log('find card ===>', card)

          if (card) {
            str += card.title + '&nbsp x' + needCards[key] + "</br>"
          }
        }

        return str ||  '暂未设置'
      },
      handleEditNeedCard(row) {
        this.current = row
        this.isEditNeedCard  = true
      },
      initList() {
        this.$http.get(`/jika/tasks`, {
          params: {
            activity_id: this.info.id
          }
        }).then(res => {
          this.list = res.data.list
        })
      },
      handleCreate() {
        this.$iForm.show({
          title: '新增活动任务',
          frame: this.frame,
          success: (data) => {
            this.$http.post(`/jika/tasks`, {
              activity_id: this.info.id,
              ...data
            }).then(res => {
              this.initList()
              this.$iForm.hide()
            })
          },
        })
      },
      handleEdit(row) {
        this.$iForm.show({
          title: '编辑活动奖品',
          frame: this.frame,
          form: row,
          success: (data) => {
            this.$http.put(`/jika/tasks/${row.uuid}`, {
              type: 'update',
              attributes: data
            }).then(res => {
              this.initList()
              this.$iForm.hide()
            })
          },
        })
      },
      handleCancel() {
        this.$emit('refresh')
        this.$emit('close')
      },
      handleSave() {
        this.$emit('refresh')
        this.$emit('close')
        // this.$http.put(`/activities/${this.uuid}/skus/batch`, {
        //   list: this.list
        // }).then(res => {
        //   this.$message.success('保存成功')
        //   this.initList()
        // })
      },
      handleDelete(row) {
        this.$confirm({
          title: '提示',
          content: `确认删除吗？`,
          onOk: () => {
            this.$http.delete(`/jika/tasks/${row.uuid}`).then(res => {
              this.$message.success('删除成功')
              this.initList()
            })
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .thumb {
    width: 60px;
    // height: 60px;
    border-radius: 6px;
  }
  .btn-c {
    display: flex;
    // margin-top: 30px;
    padding: 0rpx 30rpx;

    .add {}

    .save {
      margin-right: 20px;
    }

    .cancel {}
  }

  .tips {
    color: gray;
    font-size: 90%;
    margin-bottom: 10px;
  }

  a-input {
    display: inline;
  }
</style>
